<template>
    <div class="faxian">
        <div class="faixan_top">
            <i> < </i>
            <span>发现</span>
        </div>

        <div class="faxian_huodong">
            <div class="faxian_huodong_box">
                <div class="huodong_box right_xian">
                    <div class="huodong_box_neirong">
                        <p class="bain">金币商城</p>
                        <p class="bian">0元好物在这里</p>
                    </div>
                    <img src="https://fuss10.elemecdn.com/8/38/9c9aea0e856149083d84af3444b78jpeg.jpeg?imageMogr/format/webp/">
                </div>
            </div>
            <div class="faxian_huodong_box">
                <div class="huodong_box">
                    <div class="huodong_box_neirong">
                        <p class="bain">金币商城</p>
                        <p class="bian">0元好物在这里</p>
                    </div>
                    <img src="https://fuss10.elemecdn.com/f/85/2bb180f2052c33cfec3852ef2bfccjpeg.jpeg?imageMogr/format/webp/" alt="">
                </div>
            </div>
            <div class="faxian_huodong_box">
                <div class="huodong_box right_xian">
                    <div class="huodong_box_neirong">
                        <p class="bain">金币商城</p>
                        <p class="bian">0元好物在这里</p>
                    </div>
                    <img src="https://fuss10.elemecdn.com/2/36/b784087aff96a97f4e5183d0d784fjpeg.jpeg?imageMogr/format/webp/" alt="">
                </div>
            </div>
            <div class="faxian_huodong_box">
                <div class="huodong_box">
                    <div class="huodong_box_neirong">
                        <p class="bain">金币商城</p>
                        <p class="bian">0元好物在这里</p>
                    </div>
                    <img src="https://fuss10.elemecdn.com/6/76/8d42eef97ff4c1c2b671085358541jpeg.jpeg?imageMogr/format/webp/" alt="">
                </div>
            </div>
            <div class="faxian_huodong_box">
                <div class="huodong_box right_xian">
                    <div class="huodong_box_neirong">
                        <p class="bain">金币商城</p>
                        <p class="bian">0元好物在这里</p>
                    </div>
                    <img src="https://fuss10.elemecdn.com/5/10/2351e989d4171479ba0d7b5c06053jpeg.jpeg?imageMogr/format/webp/" alt="">
                </div>
            </div>
            <div class="faxian_huodong_box">
                <div class="huodong_box">
                    <div class="huodong_box_neirong">
                        <p class="bain">金币商城</p>
                        <p class="bian">0元好物在这里</p>
                    </div>
                    <img src="https://fuss10.elemecdn.com/3/cc/a45d2b9d7d09bbc49b40d4e626093jpeg.jpeg?imageMogr/format/webp/" alt="">
                </div>
            </div>
        </div>

        <div class="guanggao">
            <img src="https://fuss10.elemecdn.com/b/6d/656006edcd86033a1b32b23ddea37jpeg.jpeg?imageMogr/format/webp/" alt="">    
        </div>


        <div class="meiwei">
            <p class="meiwei_top">
                ←美味热推→
            </p>
            <p class="meiwei_kouwei">
                你的口味,我都懂得
            </p>


            <div class="meiwei_imgbox">
                <div class="meiwei_img_box">
                    <img src="https://fuss10.elemecdn.com/8/63/95b60d16c075e960a5cd9389101b8jpeg.jpeg?imageMogr/format/webp/">
                    <div class="meiwei_wenzi">
                        <p>南昌小炒肉盖饭</p>
                        <p class="redd">￥16</p>
                    </div>
                </div>
                <div class="meiwei_img_box">
                    <img src="https://fuss10.elemecdn.com/8/63/95b60d16c075e960a5cd9389101b8jpeg.jpeg?imageMogr/format/webp/">
                    <div class="meiwei_wenzi">
                        <p>南昌小炒肉盖饭</p>
                        <p class="redd">￥16</p>
                    </div>
                </div>
                <div class="meiwei_img_box">
                    <img src="https://fuss10.elemecdn.com/8/63/95b60d16c075e960a5cd9389101b8jpeg.jpeg?imageMogr/format/webp/">
                    <div class="meiwei_wenzi">
                        <p>南昌小炒肉盖饭</p>
                        <p class="redd">￥16</p>
                    </div>
                </div>
            </div>

            <div class="meiwei_gengduo">
                <p>查看更多></p>
            </div>
        </div>

        <div class="meiwei">
            <p class="meiwei_top">
                ←美味热推→
            </p>
            <p class="meiwei_kouwei">
                你的口味,我都懂得
            </p>


            <div class="meiwei_imgbox">
                <div class="meiwei_img_box">
                    <img src="https://fuss10.elemecdn.com/8/63/95b60d16c075e960a5cd9389101b8jpeg.jpeg?imageMogr/format/webp/">
                    <div class="meiwei_wenzi">
                        <p>南昌小炒肉盖饭</p>
                        <p class="redd">￥16</p>
                    </div>
                </div>
                <div class="meiwei_img_box">
                    <img src="https://fuss10.elemecdn.com/8/63/95b60d16c075e960a5cd9389101b8jpeg.jpeg?imageMogr/format/webp/">
                    <div class="meiwei_wenzi">
                        <p>南昌小炒肉盖饭</p>
                        <p class="redd">￥16</p>
                    </div>
                </div>
                <div class="meiwei_img_box">
                    <img src="https://fuss10.elemecdn.com/8/63/95b60d16c075e960a5cd9389101b8jpeg.jpeg?imageMogr/format/webp/">
                    <div class="meiwei_wenzi">
                        <p>南昌小炒肉盖饭</p>
                        <p class="redd">￥16</p>
                    </div>
                </div>
            </div>

            <div class="meiwei_gengduo">
                <p>查看更多></p>
            </div>
        </div>

        <div class="meiwei bottomm">
            <p class="meiwei_top">
                ←美味热推→
            </p>
            <p class="meiwei_kouwei">
                你的口味,我都懂得
            </p>


            <div class="meiwei_imgbox">
                <div class="meiwei_img_box">
                    <img src="https://fuss10.elemecdn.com/8/63/95b60d16c075e960a5cd9389101b8jpeg.jpeg?imageMogr/format/webp/">
                    <div class="meiwei_wenzi">
                        <p>南昌小炒肉盖饭</p>
                        <p class="redd">￥16</p>
                    </div>
                </div>
                <div class="meiwei_img_box">
                    <img src="https://fuss10.elemecdn.com/8/63/95b60d16c075e960a5cd9389101b8jpeg.jpeg?imageMogr/format/webp/">
                    <div class="meiwei_wenzi">
                        <p>南昌小炒肉盖饭</p>
                        <p class="redd">￥16</p>
                    </div>
                </div>
                <div class="meiwei_img_box">
                    <img src="https://fuss10.elemecdn.com/8/63/95b60d16c075e960a5cd9389101b8jpeg.jpeg?imageMogr/format/webp/">
                    <div class="meiwei_wenzi">
                        <p>南昌小炒肉盖饭</p>
                        <p class="redd">￥16</p>
                    </div>
                </div>
            </div>

            <div class="meiwei_gengduo">
                <p>查看更多></p>
            </div>
        </div>
      <my-footer></my-footer>
  </div>
</template>

<script>
import myFooter from "@/components/myfooter";

export default {
  name: "faxian",
  data() {
    return {};
  },
  components: {
    myFooter
  }
};
</script>

<style lang='less'>
.pxToRem(@p, @px) {
  @{p}: @px / 75px * 1rem;
}
.faixan_top {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  color: #fff;
  .pxToRem(line-height,100);
  background: #2395ff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  i {
    .pxToRem(font-size,50);
  }
  span {
    .pxToRem(font-size,40);
    position: absolute;
    top: 0;
    left: 45%;
    font-weight: 900;
  }
}

.faxian_huodong {
  .pxToRem(margin-top, 100);
  width: 100%;

  .faxian_huodong_box {
    background: #fff;
    width: 50%;
    float: left;
    .huodong_box {
      border-bottom: 1px solid #ccc;
      display: flex;
      padding-left: 10%;
      .pxToRem(line-height, 40);
      .bain {
        .pxToRem(padding-top, 30);
        color: rgb(255, 153, 0);
        .pxToRem(font-size, 30);
      }
      .bian {
        .pxToRem(padding-bottom, 30);
        color: #999;
      }
      img {
        .pxToRem(margin-top, 20);
        .pxToRem(margin-left, 40);
        width: 30%;
        height: 30%;
      }
    }
    .right_xian {
      border-right: 1px solid #ccc;
    }
  }
}

.guanggao {
  
  width: 100%;
  img {
      .pxToRem(margin-top, 20);
    width: 100%;
  }
}

.meiwei{
    .pxToRem(margin-top, 20);
    width: 100%;
    background: #fff;
    
    .meiwei_top{
        text-align: center;
        width: 100%;
        .pxToRem(padding-top, 30);
        .pxToRem(font-size, 40);
        font-weight: 700;
    }
    .meiwei_kouwei{
        text-align: center;
        .pxToRem(font-size, 25);
        .pxToRem(padding-bottom, 30);
    }



    .meiwei_imgbox{
        width: 100%;
        display: flex;
        .meiwei_img_box{
            margin-left:3%;
            flex:1;
            p{
                .pxToRem(line-height, 60);
            }
            .redd{
                color:red;
            }
            .pxToRem(font-size, 28);
            img{
                
                width: 90%;
                height: 65%;
            }
        }
    }

    .meiwei_gengduo{
        text-align: center;
        .pxToRem(line-height, 100);
        .pxToRem(font-size, 28);
        color:#666;
    }
}
.bottomm{
    margin-bottom: 100px;
}
</style>
